<template>
  <el-tooltip content="复制" placement="bottom" effect="light">
    <el-button
      size="mini"
      @click="handleCopyPlayurl()"
      class="copy-btn"
      :data-clipboard-text="copyContent"
    >
      <el-icon>
        <document-copy />
      </el-icon>
    </el-button>
  </el-tooltip>
</template>

<script>
  import {DocumentCopy} from '@element-plus/icons'
  import ClipboardJS from 'clipboard'
  import {ElNotification} from "element-plus";

  export default {
    name: "CopyButton",
    components: {DocumentCopy},
    props: {
      copyContent: {
        type: String,
        default: ''
      }
    },
    setup() {
      const handleCopyPlayurl = () => {
        const clipboard = new ClipboardJS('.copy-btn')
        clipboard.on('success', () => {
          ElNotification({
            message: '复制成功',
            type: 'success',
            duration: 2000,
            position: 'bottom-right'
          })
          clipboard.destroy()
        })
        clipboard.on('error', () => {
          ElNotification({
            message: '复制失败',
            type: 'error',
            duration: 2000,
            position: 'bottom-right'
          })
          clipboard.destroy()
        })
      }
      return {
        handleCopyPlayurl
      }
    }
  }
</script>

<style scoped>
  .copy-btn{border:0;padding:0;}
</style>
